<!--<template>
  <div class="borrowbook_container">
    <div class="header">
      <p>借阅图书</p>
    </div>
    <div class="banner">
      <div class="card_number">
        <el-input
            placeholder="请输入借阅证编号"
            v-model.number="borrowInfo.cardNumber"
            clearable
            size="medium"
            class="input-style"
        >
          <el-button slot="prepend" icon="el-icon-notebook-2" class="input-icon"></el-button>
        </el-input>
      </div>
      <div class="book_number">
        <el-input
            placeholder="请输入图书编号"
            v-model.number="borrowInfo.bookNumber"
            size="medium"
            clearable
            class="input-style"
        >
          <el-button slot="prepend" icon="el-icon-collection" class="input-icon"></el-button>
        </el-input>
      </div>
      <div class="borrow_date">
        <el-date-picker
            v-model="borrowInfo.borrowDate"
            type="datetime"
            placeholder="选择日期时间"
            default-time="12:00:00"
            value-format="yyyy-MM-dd HH:mm:ss"
            class="input-style"
        >
        </el-date-picker>
      </div>
      <div class="borrow_button">
        <el-button
            type="primary"
            @click="borrowBook"
            class="btn-style"
        >
          借阅
        </el-button>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      borrowInfo: {
        cardNumber: "",
        bookNumber: "",
        borrowDate: "",
        bookAdminId: 0
      },
    };
  },
  methods: {
    async borrowBook(){
      if(this.borrowInfo.borrowDate === ""){
        return this.$message.error({
          message: "借阅时间不能为空",
          duration: 1000
        });
      }
      this.borrowInfo.bookAdminId = parseInt(window.sessionStorage.getItem('bookAdminId'));
      const { data: res } = await this.$http.post('bookadmin/borrow_book', this.borrowInfo);
      if(res.status !== 200){
        return this.$message.error(res.msg);
      }
      this.$message.success(res.msg);
      // 清空数据
      this.borrowInfo.bookNumber = "";
      this.borrowInfo.cardNumber = "";
      this.borrowInfo.borrowDate = "";
    }
  },
};
</script>

<style lang="less" scoped>
.borrowbook_container {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: 20px;
  .header {
    width: 100%;
    height: 100px;
    background-color: #f4f6f8;
    border-bottom: 2px solid #ddd;
    p {
      color: #333;
      font-size: 28px;
      text-align: center;
      line-height: 100px;
      font-weight: bold;
    }
  }
  .banner {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 50%;
    background-color: #fff;
    border-radius: 10px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    padding: 30px;
    margin-top: 20px;
    .card_number, .book_number, .borrow_date {
      width: 100%;
      margin-bottom: 20px;
    }
    .borrow_button {
      width: 100%;
      display: flex;
      justify-content: center;
    }
  }
}

.input-style {
  width: 100%;
  border-radius: 8px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
}

.input-icon {
  background-color: #f0f2f5;
  border-radius: 8px 0 0 8px;
}

.btn-style {
  width: 100%;
  height: 40px;
  font-size: 16px;
  border-radius: 8px;
  background-color: #409EFF;
  border: none;
  &:hover {
    background-color: #66b1ff;
  }
}
</style>-->
<template>
  <div class="borrowbook_container">
    <div class="header">
      <p>借阅图书</p>
    </div>
    <div class="banner">
      <div class="form-item card_number">
        <el-input
            placeholder="请输入借阅证编号"
            v-model.number="borrowInfo.cardNumber"
            clearable
            size="medium"
            class="input-style"
        >
          <el-button slot="prepend" icon="el-icon-notebook-2" class="input-icon"></el-button>
        </el-input>
      </div>
      <div class="form-item book_number">
        <el-input
            placeholder="请输入图书编号"
            v-model.number="borrowInfo.bookNumber"
            size="medium"
            clearable
            class="input-style"
        >
          <el-button slot="prepend" icon="el-icon-collection" class="input-icon"></el-button>
        </el-input>
      </div>
      <div class="form-item borrow_date">
        <el-date-picker
            v-model="borrowInfo.borrowDate"
            type="datetime"
            placeholder="选择日期时间"
            default-time="12:00:00"
            value-format="yyyy-MM-dd HH:mm:ss"
            class="input-style"
        >
        </el-date-picker>
      </div>
      <div class="borrow_button">
        <el-button
            type="primary"
            @click="borrowBook"
            class="btn-style"
        >
          借阅
        </el-button>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      borrowInfo: {
        cardNumber: "",
        bookNumber: "",
        borrowDate: "",
        bookAdminId: 0
      },
    };
  },
  methods: {
    async borrowBook(){
      if(this.borrowInfo.borrowDate === ""){
        return this.$message.error({
          message: "借阅时间不能为空",
          duration: 1000
        });
      }
      this.borrowInfo.bookAdminId = parseInt(window.sessionStorage.getItem('bookAdminId'));
      const { data: res } = await this.$http.post('bookadmin/borrow_book', this.borrowInfo);
      if(res.status !== 200){
        return this.$message.error(res.msg);
      }
      this.$message.success(res.msg);
      // 清空数据
      this.borrowInfo.bookNumber = "";
      this.borrowInfo.cardNumber = "";
      this.borrowInfo.borrowDate = "";
    }
  },
};
</script>

<style lang="less" scoped>
.borrowbook_container {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: 40px;
  .header {
    width: 100%;
    height: 120px;
    background-color: #f4f6f8;
    border-bottom: 2px solid #ddd;
    display: flex;
    justify-content: center;
    align-items: center;
    p {
      color: #333;
      font-size: 32px;
      font-weight: 600;
    }
  }
  .banner {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 80%;
    max-width: 600px;
    background-color: #fff;
    border-radius: 12px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
    padding: 40px;
    margin-top: 30px;
    .form-item {
      width: 100%;
      margin-bottom: 25px;
      display: flex;
      flex-direction: column;
      align-items: flex-start;
    }
    .borrow_button {
      width: 100%;
      display: flex;
      justify-content: center;
    }
  }
}

.input-style {
  width: 100%;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  padding: 10px;
}

.input-icon {
  background-color: #f0f2f5;
  border-radius: 8px 0 0 8px;
}

.btn-style {
  width: 100%;
  height: 45px;
  font-size: 18px;
  font-weight: 600;
  border-radius: 8px;
  background: linear-gradient(135deg, #409eff, #66b1ff);
  border: none;
  color: white;
  &:hover {
    background: linear-gradient(135deg, #66b1ff, #409eff);
    box-shadow: 0 4px 15px rgba(0, 150, 255, 0.3);
  }
  &:active {
    background: linear-gradient(135deg, #4089ff, #4687f7);
    box-shadow: none;
  }
}
</style>

